<#assign ctx=request.contextPath />
<#import '${ctx}/sys/include/head.html' as d />
<#import '${ctx}/sys/include/body.html' as c />
<#import '${ctx}/sys/include/table/select.html' as select />
<!DOCTYPE html>
<html>
<head>
    <@d.head title="pie" />
    <!--<script src="${ctx}/resource/echart/echarts.js/" type="text/javascript"></script>-->
    <!--<script src="${ctx}/resource/echart/theme/macarons.js"></script>-->

    <script src="${ctx}/resource/antv/g2.js"></script>
    <script src="${ctx}/resource/antv/dataset.js"></script>
    <style>::-webkit-scrollbar {
        display: none;
    }

    html, body {
        overflow: hidden;
        height: 100%;
        margin: 0;
    }</style>
</head>
<@c.body>
<div class="layui-tab layui-tab-brief" lay-filter="graph_config">
    <ul class="layui-tab-title">
        <li>图表展示</li>
        <li class="layui-this">图表设置</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item">
            <div class="layui-form">
				<span class="layui-breadcrumb"> <a href="#"><cite>第一级</cite></a>
					<a href="#">第二级</a> <a href="#">第三级</a>
				</span>
                <div class="layui-form-item">
                    <label class="layui-form-label">过滤条件</label>
                    <div class="layui-input-block">
                        <input type="text" class="layui-input"/>
                    </div>
                </div>
                <div id="condition_span">
                    <span class="layui-badge-rim">第一级:产线:Station01s</span> <span
                        class="layui-badge-rim">第二级:生产日期=2019-01</span>
                    <div class="layui-btn-group">
                        <button class="layui-btn layui-btn-primary layui-btn-sm">
                            <i class="layui-icon"></i>
                        </button>
                    </div>
                </div>

            </div>
            <div id="line" class="text-center"></div>
        </div>
        <div class="layui-tab-item layui-show">
            <div class="layui-container" style="margin-top: 12px;">
                <div class="layui-row">
                    <form class="layui-form">
                        <div class="layui-form-item">
                            <label class="layui-form-label">选择数据源</label>
                            <div class="layui-input-block"><@select.table name="dsId"
                                show="dsName" url="${ctx}/biz/c/p/ds-select-table" />
                            </div>
                        </div>
                        <label>指标设置</label>
                        <hr/>
                        <div class="layui-card">
                            <div class="layui-card-header">分析指标</div>
                            <div class="layui-card-body">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">计算方式</label>
                                    <div class="layui-input-block">
                                        <select name="aggregation" lay-verify="required"
                                                lay-filter="metrics_select">
                                            <option value="count">总数</option>
                                            <option value="sum">累和</option>
                                            <option value="avg">平均值</option>
                                            <option value="unique">唯一值</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-form-item layui-hide">
                                    <label class="layui-form-label">计算字段</label>
                                    <div class="layui-input-block"><@select.table
                                        name="metrics" show="metricsName"
                                        url="${ctx}/biz/c/p/field-select-table" />
                                    </div>
                                </div>
                            </div>
                        </div>

                        <label>维度设置</label>
                        <hr/>
                        <div class="layui-form-item">
                            <label class="layui-form-label">拆分方式</label>
                            <div class="layui-input-block">
                                <select name="aggregation" lay-verify="required"
                                        lay-filter="aggs_select">
                                    <option value="term">按字段值</option>
                                    <option value="date">按时间</option>
                                    <option value="range">按区间</option>
                                    <option value="filter">按条件</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">聚合字段</label>
                            <div class="layui-input-block"><@select.table name="aggs"
                                show="aggsName" url="${ctx}/biz/c/p/field-select-table" />
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</@c.body>
<script type="text/javascript">
    layui.use(['form', 'element', 'appJs'], function () {
        var $ = layui.$;
        var form = layui.form, element = layui.element, app = layui.appJs;

        var redraw = true;

        element.on('tab(graph_config)', function (data) {
            console.log(data.index); //得到当前Tab的所在下标
            if (data.index == 0) {
                if (redraw)
                    draw();
            }
        });

        form.on('select(metrics_select)', function (data) {
            var ele = data.elem;
            var val = data.value;
            console.log("=>" + val)
            if (val != 'count') {
                $(ele).parent().parent().next().removeClass('layui-hide');
            } else {
                $(ele).parent().parent().next().addClass('layui-hide');
            }
        });
        form.render();
        var chart;

        function draw() {
            var data = [{
                year: 'S01',
                value: 0.991
            }, {
                year: 'S02',
                value: 0.987
            }, {
                year: 'S03',
                value: 0.987
            }, {
                year: 'S04',
                value: 0.993
            }, {
                year: 'S05',
                value: 0.986
            }, {
                year: 'S06',
                value: 0.985
            }, {
                year: 'S07',
                value: 0.989
            }, {
                year: 'S08',
                value: 0.951
            }, {
                year: 'S09',
                value: 0.998
            }];
            var chart = new G2.Chart({
                container: 'line',
                forceFit: true,
                height: 600,
                width: 1600
            });
            chart.source(data);
            chart.scale('value', {
                min: 0
            });
            chart.scale('year', {
                range: [0, 1]
            });
            chart.tooltip({
                crosshairs: {
                    type: 'line'
                }
            });
            chart.line().position('year*value');
            chart.point().position('year*value').size(4).shape('circle').style({
                stroke: '#fff',
                lineWidth: 1
            });
            chart.render();
        }
    });
</script>